<template>
	<view class="page">
		<hx-navbar title="我的资料" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		</hx-navbar>
		<view class="ytx"></view>
		<view class="">
			<view class="cu-form-group touxian">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
					 <image :src="imgList[index]" mode="aspectFill"></image>
					</view>
					<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
						<text class='cuIcon-cameraadd'></text>
					</view>
				</view>
				<view class="main-right" @tap="ChooseImage">
					更换个人头像 <text class="cuIcon-right text-sm"></text>
				</view>
			</view>
		</view>
		<view class="ytx"></view>
		<view class="cu-form-group">
			<view class="title text-bold">姓名</view>
			<input placeholder="输入姓名" name="input" @focus="focus"></input>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">性别</view>
			<picker @change="PickerChange" :value="index" :range="Gender">
				<view class="picker">
					{{index>-1?Gender[index]:'选择性别'}}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">手机号码</view>
			<input placeholder="请输入手机号" name="input"></input>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">修改密码</view>
			<view class="main-right">
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">绑定微信</view>
			<view class="main-right">
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="ytx"></view>
		<view class="cu-form-group">
			<view class="title text-bold">我的会员</view>
			<view class="main-right">
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">我的地址</view>
			<view class="main-right">
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">我的企业</view>
			<view class="main-right">
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="ytx"></view>
		<view class="cu-form-group">
			<view class="title text-bold">实名认证</view>
			<view class="main-right">
				<text>已认证</text>
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">企业实名认证</view>
			<view class="main-right ">
				<text class="red">未认证</text>
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title text-bold">担保认证</view>
			<view class="main-right">
				<text class="red">未认证</text>
				<text class="cuIcon-right text-sm " style="padding-right: 20rpx;">
			</text>
			</view>
		</view>
		<view class="cu-form-group" style="min-height: 30px;">
		</view>
		<view class="bottom-button">
			退出当前账号
		</view>
	</view>
</template>

<script>
export default {
	    data() {
	        return {
            index: -1,
            Gender:['男', '女'],
            imgList: [],
	        };
	    },
    methods:{
        PickerChange(e) {
		    this.index = e.detail.value;
        },
        ChooseImage() {
			    uni.chooseImage({
			        count: 4, //默认9
			        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			        sourceType: ['album'], //从相册选择
			        success: (res) => {
			            if (this.imgList.length != 0) {
			                this.imgList = this.imgList.concat(res.tempFilePaths);
			            } else {
			                this.imgList = res.tempFilePaths;
			            }
			        }
			    });
        },
        ViewImage(e) {
			    uni.previewImage({
			        urls: this.imgList,
			        current: e.currentTarget.dataset.url
			    });
        },
        focus(){
			
        }
    }
};
</script>

<style>
	.ytx{
		width: 100%;
		height: 20rpx;
		background-color: #F5F5F5;
	}
	.touxian.cu-form-group{
		    padding: 20rpx 40rpx;
	}
	.grid image{
		border-radius: 20rpx;
	}
	.grid.grid-square>view{
		border-radius: 20rpx;
	}
	.grid.grid-square>view>text{
		background-color: #E7E7E7;
	}
	.grid.grid-square>view{
		margin-bottom: 0;
	}
	.grid.col-4.grid-square>uni-view {
	    padding-bottom: calc((100% - 30px)/3);
	    height: 0;
	    width: calc((100% - 30px)/3);
	}
	.solids::after{
		border: 0;
	}
	.cu-form-group{
		padding: 0rpx 40rpx;
	}
	.cu-form-group input{
		text-align: right;
	}
	.cu-form-group input:hover{
		text-align: left;
	}
	.cu-form-group .title{
		width: 25%;
		color: #202021;
	}
	.main-right{
		color: #666;
	}
	.cu-form-group uni-picker{
		color: #666;
		padding-right: 20rpx;
	}
	.cu-form-group uni-picker::after{
		display: none;
	}
	.red{
		color:#F23839 ;
	}
	.bottom-button{
		color: #FFFFFF;
		font-size: 36rpx;
		background-color: #26C594;
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
	}
</style>
